<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>效果库</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<link href="../css/mui.css" rel="stylesheet"/>
	<link href="../css/mui.min.css" rel="stylesheet"/>
	<link href="../css/mui-icons-extra.css" rel="stylesheet"/>
	<link href="../css/app.css" rel="stylesheet"/>
	<style type="text/css">
	</style>
</head>
<body>
	<!-- 头部TITLE -->
	<header class="app-header">
		<b>效果库</b>
		&nbsp; &nbsp; 
		<span onclick="jumpToMarketHistory()">足迹</span>
	</header>
	<!-- 头部TITLE -->
	
	<!-- 主体部分 -->
	<div class="app-video-bg" id="refresh">
	</div>
	<!-- 更多按钮 -->
	<p id="more"></p>
	<br><br>
	<!-- 主体部分 -->
	
	<!-- 底部菜单 -->
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item" onclick="jumpToIndex()">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item mui-active" onclick="jumpToMarket()">
			<span class="mui-icon mui-icon-download"></span>
			<span class="mui-tab-label">库</span>
		</a>
<!-- 		<a class="mui-tab-item" onclick="jumpToMarket()">
			<span class="mui-icon mui-icon-download"></span>
			<span class="mui-tab-label">广场</span>
		</a> -->
<!-- 		<a class="mui-tab-item" onclick="jumpToCamera()">
			<span class="mui-icon mui-icon-camera"></span>
			<span class="mui-tab-label">拍</span>
		</a> -->
<!-- 		<a class="mui-tab-item" onclick="jumpToChat()">
			<span class="mui-icon mui-icon mui-icon-chatbubble"></span>
			<span class="mui-tab-label">消息</span>
		</a> -->
		<a class="mui-tab-item" onclick="jumpToMy()">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	<!-- 底部菜单 -->
</body>
</html>

<script src="../js/mui.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
	// 初始化
	mui.init({
		//下拉、上拉刷新
        pullRefresh: {
            container: "#refresh",
            down: { //下拉刷新
				style: "circle",
				height: 50,
				auto: true,
                contentrefresh: "视频正在加载...",
                contentnomore: '没有更多视频了',
                callback: async function () { 
					getMarket();
					mui('#refresh').pullRefresh().endPulldownToRefresh();
                }
            },
            up: { //上拉加载
                height: 50, 
                auto: false, 
                contentrefresh: "更多视频正在加载...", 
                contentnomore: '没有更多数据了', 
                callback: async function () { 
					getMarket();
                }
            }
        }
    });
	// //自动加载
	// mui.plusReady(function () {
	// 	(function($, owner) {
	// 		getMarket(); //数据列表
	// 	}(mui, window.app = {}));
	// });
	// 获取数据
	function getMarket(){
		// 系统参数
		var sys = getSys();
		// if (sys==null || sys.appAccess=='') { 
		// 	setSys(); //参数更新
		// 	setTimeout(function(){
		// 		jumpToMarket();
		// 	}, 1000);
		// } 
		// 用户信息
		var userInfo = cacheGet(userInfoKey);
		var uid = userInfo ? userInfo.uid : 0;
		var resList = getMarketCache(); //数据缓存
		var idstr = resList.idstr;
		mui.ajax(sys.domain+'/app/stock/one',{
			data:{
				appAccess: sys.appAccess,
				uid:uid,
				idstr:idstr
			},
			dataType:'json', //服务器返回json格式数据
			type:'post', //HTTP请求类型
			timeout:10000, //超时时间设置为10秒
			headers:{'Content-Type':'application/x-www-form-urlencoded'}, 
			success:function(res){
				// mui.toast('code'+res.code); return
				var p = '';
				if (res.code==-1) {
					mui.toast('需要更新系统参数',{ 
						duration:'long', type:'div',
					});
					setTimeout(function(){
						setSys();
						jumpToIndex();
					},500);
				} else if (res.code!=0) {
					p = '<button type="button" class="mui-btn mui-btn-block noDataBtn">没有视频了</button>';
					mui("#more")[0].innerHTML = p;
					setTimeout(function(){
						jumpToMarketHistory();
					}, 500);
					return
				}
				var v = res.data;
				// 显示一个
				//屏幕宽度
				var cw = document.documentElement.clientWidth;
				//屏幕高度 
				var ch = document.documentElement.clientHeight; 
				var vHeight = Math.round(cw * v.videoRatio);
				//显示有限字数
				var vTitle = getStrLimitNum(v.videoTitle,20);
				var h = ''; 
				h += '<div class="app-video" style="height:'+vHeight+'px;">';
				h += '<video poster="'+v.videoImg+'" type="video/mp4" name="media" height="'+vHeight+'" controls="controls" autoplay="autoplay" loop class="app-video-tag"><source src="'+v.videoLink+'" type="video/mp4"></video>';
				h += '<div class="app-video-title app-shadow">'+vTitle+'</div>';
				h += '<div class="app-video-menu">';
				// h += '<span class="mui-icon-extra mui-icon-extra-heart-filled app-video-grey"></span>';
				// h += '<div class="app-video-grey">0</div>';
				// h += '<div style="height: 8px;"></div>';
				// h += '<span class="mui-icon mui-icon-chat app-video-grey"></span>';
				// h += '</div>';
				h += '<span id="zanSpan">';
				// 点赞图标和数字
				if (v.zanUser==0) {
					h += '<span class="mui-icon-extra mui-icon-extra-heart-filled app-video-grey app-shadow" onclick="setZanAdd('+v.videoId+')"></span>';
				} else {
					h += '<span class="mui-icon-extra mui-icon-extra-heart-filled app-heart-light app-shadow" onclick="setZanDel('+v.videoId+')"></span>';
				}
				h += '<input type="hidden" id="zanInputTotal" value="'+v.zanTotal+'"/>';
				h += '</span>';
				h += '<div class="app-video-grey app-shadow" id="zanDivTotal">'+v.zanTotal+'</div>';
				// 收藏图标和数字
				h += '<div style="height: 8px;"></div>';
				h += '<span id="collectSpan">';
				if (v.collectUser==0) {
					h += '<span class="mui-icon mui-icon-starhalf app-video-grey app-shadow" onclick="setCollectAdd('+v.videoId+')"></span>';
				} else {
					h += '<span class="mui-icon mui-icon-starhalf app-heart-light app-shadow" onclick="setCollectDel('+v.videoId+')"></span>';
				}
				h += '<input type="hidden" id="collectInputTotal" value="'+v.collectTotal+'"/>';
				h += '</span>';
				h += '<div class="app-video-grey app-shadow" id="collectDivTotal">'+v.collectTotal+'</div>';
				// 加入创作图标
				h += '<div style="height: 8px;"></div>';
				h += '<span id="plusSpan">';
				if (v.plusUser==0) {
					h += '<span class="mui-icon mui-icon-plus app-video-grey app-shadow" onclick="setPlusAdd('+v.videoId+')"></span>';
				} else {
					h += '<span class="mui-icon mui-icon-plus app-heart-light app-shadow"></span>';
				}
				h += '<input type="hidden" id="plusInputTotal" value="'+v.plusTotal+'"/>';
				h += '</span>';
				h += '<div class="app-video-grey app-shadow" id="plusDivTotal">'+v.plusTotal+'</div>';
				h += '</div>';
				h += '</div>';
				mui("#refresh")[0].innerHTML = h;
				var vc = {
					videoId:v.videoId,
					// 文件名称全
					videoTitle:v.videoTitle,
					videoRatio:v.videoRatio,
					videoImg:v.videoImg,
					videoLink:v.videoLink,
					// 点赞总数
					zanTotal:v.zanTotal,
					// 当前登陆人是否点赞，0无1有
					zanUser:v.zanUser,
					// 收藏总数
					collectTotal:v.collectTotal,
					// 当前登陆人是否收藏，0无1有
					collectUser:v.collectUser,
					// 加入创作总数
					plusTotal:v.plusTotal,
					// 当前登陆人是否加入创作，0无1有
					plusUser:v.plusUser
				};
				setMarketCache(vc); //更新缓存
				// 继续下拉
				mui('#refresh').pullRefresh().endPullupToRefresh(false);
			},
			error:function(xhr,type,errorThrown){
				mui.toast('网络错误！',{ 
					duration:'short', type:'div',
				});
			}
		});
	}
	//获取数据缓存
	function getMarketCache(){
		var resList = cacheGet(marketList);
		if (!resList) {
			var list = new Array(),  //数据数组
				idstring = ''; //ID字符串集合
			return {
				// 数据数组
				list: list,
				// 历史ID集合
				idstr: idstring
			};
		}
		return resList;
	}
	/** 
	 * 设置数据缓存
	 * one 新数据一个
	 * */
	function setMarketCache(one){
		var resList = getMarketCache();
		var list = resList.list,  //数据数组
			idstring = resList.idstr; //历史ID字符串集合
		if (list.length==0) {
			idstring = one.videoId;
		} else {
			idstring = idstring+','+one.videoId;
		}
		list[list.length] = one;
		var marketNew = {
			// 数据数组
			list: list,
			// 历史ID字符串集合
			idstr: idstring,
		};
		cacheSet(marketList, marketNew);
	}
	// 点赞增加
	function setZanAdd(vid){
		// 系统参数
		var sys = getSys();
		// if (sys==null || sys.appAccess=='') { 
		// 	setSys(); //参数更新
		// 	setTimeout(function(){
		// 		jumpToMarket();
		// 	}, 1000);
		// } 
		// 用户信息
		var userInfo = cacheGet(userInfoKey);
		var uid = userInfo ? userInfo.uid : 0;
		if (uid==0) {
			mui.toast('没有登陆',{ 
				duration:'short', type:'div',
			});
			setTimeout(function(){
				jumpToMyLogin();
			}, 500);
			return
		}
		// 更新显示
		var total = mui("#zanInputTotal")[0].value;
		total = total * 1 + 1;
		mui("#zanSpan")[0].innerHTML = '<span class="mui-icon-extra mui-icon-extra-heart-filled app-heart-light app-shadow" onclick="setZanDel('+vid+')"></span><input type="hidden" id="zanInputTotal" value="'+total+'"/>';
		mui("#zanDivTotal")[0].innerHTML = total;
		mui.toast('你好优秀哦'); 
		// 更新缓存的赞
		var resList = getMarketCache();
		var list = resList.list;
		if (list.length==0) { return }
		for (var i=0;i<list.length;i++) {
			if (list[i].videoId==vid) {
				list[i].zanTotal = total;
				list[i].zanUser = 1;
			}
		}
		resList.list = list;
		cacheSet(marketList, resList);
		// 更新服务器
		mui.ajax(sys.domain+'/app/stock/zan/add',{
			data:{
				appAccess: sys.appAccess,
				uid:uid,
				vid: vid
			},
			dataType:'json', //服务器返回json格式数据
			type:'post', //HTTP请求类型
			timeout:10000, //超时时间设置为10秒
			headers:{'Content-Type':'application/x-www-form-urlencoded'}, 
			success:function(res){
				// mui.toast('??ADD'+res.code);
				if (res.code==-1) {
					mui.toast('需要更新系统参数',{ 
						duration:'long', type:'div',
					});
					setTimeout(function(){
						setSys();
						jumpToIndex();
					},500);
				} else if (res.code!=0) {
					// mui.toast('ERR');
					return
				}
				// mui.toast('OK');
			},
			error:function(xhr,type,errorThrown){
				mui.toast('网络错误！',{ 
					duration:'short', type:'div',
				});
			}
		});
	}
	// 点赞减少
	function setZanDel(vid){
		// 系统参数
		var sys = getSys();
		// if (sys==null || sys.appAccess=='') { 
		// 	setSys(); //参数更新
		// 	setTimeout(function(){
		// 		jumpToMarket();
		// 	}, 1000);
		// } 
		// 用户信息
		var userInfo = cacheGet(userInfoKey);
		var uid = userInfo ? userInfo.uid : 0;
		if (uid==0) {
			mui.toast('没有登陆',{ 
				duration:'short', type:'div',
			});
			setTimeout(function(){
				jumpToMyLogin();
			}, 500);
			return
		}
		// 更新显示
		var total = mui("#zanInputTotal")[0].value;
		total = total * 1 - 1;
		mui("#zanSpan")[0].innerHTML = '<span class="mui-icon-extra mui-icon-extra-heart-filled app-video-grey app-shadow" onclick="setZanAdd('+vid+')"></span><input type="hidden" id="zanInputTotal" value="'+total+'"/>';
		mui("#zanDivTotal")[0].innerHTML = total;
		mui.toast('宝宝伤心了'); 
		// 更新缓存的赞
		var resList = getMarketCache();
		var list = resList.list;
		for (var i=0;i<list.length;i++) {
			if (list[i].videoId==vid) {
				list[i].zanTotal = total;
				list[i].zanUser = 0;
			}
		}
		resList.list = list;
		cacheSet(marketList, resList);
		// 更新服务器
		mui.ajax(sys.domain+'/app/stock/zan/del',{
			data:{
				appAccess: sys.appAccess,
				uid:uid,
				vid: vid
			},
			dataType:'json', //服务器返回json格式数据
			type:'post', //HTTP请求类型
			timeout:10000, //超时时间设置为10秒
			headers:{'Content-Type':'application/x-www-form-urlencoded'}, 
			success:function(res){
				// mui.toast('??DEL'+res.code);
				if (res.code==-1) {
					mui.toast('需要更新系统参数',{ 
						duration:'long', type:'div',
					});
					setTimeout(function(){
						setSys();
						jumpToIndex();
					},500);
				} else if (res.code!=0) {
					// mui.toast('ERR');
					return
				}
				// mui.toast('OK');
			},
			error:function(xhr,type,errorThrown){
				mui.toast('网络错误！',{ 
					duration:'short', type:'div',
				});
			}
		});
	}
	// 收藏增加
	function setCollectAdd(vid){
		// 系统参数
		var sys = getSys();
		// if (sys==null || sys.appAccess=='') { 
		// 	setSys(); //参数更新
		// 	setTimeout(function(){
		// 		jumpToMarket();
		// 	}, 1000);
		// } 
		// 用户信息
		var userInfo = cacheGet(userInfoKey);
		var uid = userInfo ? userInfo.uid : 0;
		if (uid==0) {
			mui.toast('没有登陆',{ 
				duration:'short', type:'div',
			});
			setTimeout(function(){
				jumpToMyLogin();
			}, 500);
			return
		}
		// 更新显示
		var total = mui("#collectInputTotal")[0].value;
		total = total * 1 + 1;
		mui("#collectSpan")[0].innerHTML = '<span class="mui-icon mui-icon-starhalf app-heart-light app-shadow" onclick="setCollectDel('+vid+')"></span><input type="hidden" id="collectInputTotal" value="'+total+'"/>';
		mui("#collectDivTotal")[0].innerHTML = total;
		mui.toast('太棒了'); 
		// 更新缓存的收藏
		var resList = getMarketCache();
		var list = resList.list;
		if (list.length==0) { return }
		for (var i=0;i<list.length;i++) {
			if (list[i].videoId==vid) {
				list[i].collectTotal = total;
				list[i].collectUser = 1;
			}
		}
		resList.list = list;
		cacheSet(marketList, resList);
		// 更新服务器
		mui.ajax(sys.domain+'/app/stock/collect/add',{
			data:{
				appAccess: sys.appAccess,
				uid:uid,
				vid: vid
			},
			dataType:'json', //服务器返回json格式数据
			type:'post', //HTTP请求类型
			timeout:10000, //超时时间设置为10秒
			headers:{'Content-Type':'application/x-www-form-urlencoded'}, 
			success:function(res){
				if (res.code==-1) {
					mui.toast('需要更新系统参数',{ 
						duration:'long', type:'div',
					});
					setTimeout(function(){
						setSys();
						jumpToIndex();
					},500);
				} else if (res.code!=0) {
					// mui.toast('ERR');
					return
				}
				// mui.toast('OK');
			},
			error:function(xhr,type,errorThrown){
				mui.toast('网络错误！',{ 
					duration:'short', type:'div',
				});
			}
		});
	}
	// 收藏减少
	function setCollectDel(vid){
		// 系统参数
		var sys = getSys();
		// if (sys==null || sys.appAccess=='') { 
		// 	setSys(); //参数更新
		// 	setTimeout(function(){
		// 		jumpToMarket();
		// 	}, 1000);
		// } 
		// 用户信息
		var userInfo = cacheGet(userInfoKey);
		var uid = userInfo ? userInfo.uid : 0;
		if (uid==0) {
			mui.toast('没有登陆',{ 
				duration:'short', type:'div',
			});
			setTimeout(function(){
				jumpToMyLogin();
			}, 500);
			return
		}
		// 更新显示
		var total = mui("#collectInputTotal")[0].value;
		total = total * 1 - 1;
		mui("#collectSpan")[0].innerHTML = '<span class="mui-icon mui-icon-starhalf app-video-grey app-shadow" onclick="setCollectAdd('+vid+')"></span><input type="hidden" id="collectInputTotal" value="'+total+'"/>';
		mui("#collectDivTotal")[0].innerHTML = total;
		mui.toast('宝宝心酸'); 
		// 更新缓存的收藏
		var resList = getMarketCache();
		var list = resList.list;
		for (var i=0;i<list.length;i++) {
			if (list[i].videoId==vid) {
				list[i].collectTotal = total;
				list[i].collectUser = 0;
			}
		}
		resList.list = list;
		cacheSet(marketList, resList);
		// 更新服务器
		mui.ajax(sys.domain+'/app/stock/collect/del',{
			data:{
				appAccess: sys.appAccess,
				uid:uid,
				vid: vid
			},
			dataType:'json', //服务器返回json格式数据
			type:'post', //HTTP请求类型
			timeout:10000, //超时时间设置为10秒
			headers:{'Content-Type':'application/x-www-form-urlencoded'}, 
			success:function(res){
				// mui.toast('??'+res.code)
				if (res.code==-1) {
					mui.toast('需要更新系统参数',{ 
						duration:'long', type:'div',
					});
					setTimeout(function(){
						setSys();
						jumpToIndex();
					},500);
				} else if (res.code!=0) {
					// mui.toast('ERR');
					return
				}
				// mui.toast('OK');
			},
			error:function(xhr,type,errorThrown){
				mui.toast('网络错误！',{ 
					duration:'short', type:'div',
				});
			}
		});
	}
	// 创作新增
	function setPlusAdd(vid){
		// 系统参数
		var sys = getSys();
		// 用户信息
		var userInfo = cacheGet(userInfoKey);
		var uid = userInfo ? userInfo.uid : 0;
		if (uid==0) {
			mui.toast('没有登陆',{ 
				duration:'short', type:'div',
			});
			setTimeout(function(){
				jumpToMyLogin();
			}, 500);
			return
		}
		// 更新显示
		var total = mui("#plusInputTotal")[0].value;
		total = total * 1 + 1;
		mui("#plusSpan")[0].innerHTML = '<span class="mui-icon mui-icon-plus app-heart-light app-shadow"></span><input type="hidden" id="plusInputTotal" value="'+total+'"/>';
		mui("#plusDivTotal")[0].innerHTML = total;
		mui.toast('太棒了，加入成功！'); 
		// 更新服务器
		mui.ajax(sys.domain+'/app/stock/plus/add',{
			data:{
				appAccess: sys.appAccess,
				uid:uid,
				vid: vid
			},
			dataType:'json', //服务器返回json格式数据
			type:'post', //HTTP请求类型
			timeout:10000, //超时时间设置为10秒
			headers:{'Content-Type':'application/x-www-form-urlencoded'}, 
			success:function(res){
				// mui.toast('??'+res.code)
				if (res.code==-1) {
					mui.toast('需要更新系统参数',{ 
						duration:'long', type:'div',
					});
					setTimeout(function(){
						setSys();
						jumpToIndex();
					},500);
				} else if (res.code!=0) {
					// mui.toast('ERR');
					return
				}
				// mui.toast('OK');
				var plusId = res.data.lastId;
				// 更新缓存的创作
				var resList = getPlusCache();
				var list = resList.list;
				// for (var i=0;i<list.length;i++) {
				// 	if (list[i].plusId==vid) {
				// 		list[i].plusTotal = total;
				// 		list[i].plusUser = 1;
				// 	}
				// }
				list[list.length] = {
					// plusId:plusId,
					// plusUser:
				};
				resList.list = list;
				cacheSet(plusList, resList);
			},
			error:function(xhr,type,errorThrown){
				mui.toast('网络错误！',{ 
					duration:'short', type:'div',
				});
			}
		});
	}
	//获取创单数据缓存
	function getPlusCache(){
		var resList = cacheGet(plusList);
		if (!resList) {
			var list = new Array(),  //数据数组
				idstring = ''; //ID字符串集合
			return {
				// 数据数组
				list: list,
				// 历史ID集合
				idstr: idstring
			};
		}
		return resList;
	}
	/** 
	 * 设置创单数据缓存
	 * one 新数据一个
	 * */
	function sePlusCache(one){
		var resList = getPlusCache();
		var list = resList.list,  //数据数组
			idstring = resList.idstr; //历史ID字符串集合
		if (list.length==0) {
			idstring = one.plusId;
		} else {
			idstring = idstring+','+one.plusId;
		}
		list[list.length] = one;
		var plusNew = {
			// 数据数组
			list: list,
			// 历史ID字符串集合
			idstr: idstring,
		};
		cacheSet(plusList, plusNew);
	}
</script>